<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="false"
    class="order-setting-dialog small-common-dialog-size"
    width="450px">
    <div :style="{maxHeight: maxHeight}" class="container-scroll">
      <div>
        <Title title="背景设置" style="margin-bottom:24px;"/>
        <el-form class="config-form lineHeight32" label-width="3em" label-position="right" style="transform: translateX(8px)">
          <el-form-item label="图片">
            <div class="config-attachment-container" style="width: 240px;">
              <upBackground
                ref="uploadImg"
                :import-api="'/admin/charts/upload'"
                :hide-confirm="true"
                :file-list="paramsObj.attachment || ''"
                title-bg
                hide-clip-up
                btn-text="上传文件"
                accept="image/gif,image/jpeg,image/jpg,image/png"
                @upProgress="upProgress"
                @complateSetData="complateSetData"
                @removeFileList="removeFileList" />
            </div>
          </el-form-item>
          <el-form-item label="位置">
            <el-radio-group v-model="paramsObj.backgroundSize">
              <el-radio :label="'拉伸'"><span class="font13">拉伸</span></el-radio>
              <el-radio :label="'平铺'"><span class="font13">平铺</span></el-radio>
              <el-radio :label="'居中'"><span class="font13">居中</span></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <Title title="画布设置" style="margin-bottom:24px;"/>
        <el-form class="config-form lineHeight32" label-width="78px" label-position="right">
          <!-- 模块边距: 模块的margin -->
          <el-form-item label="模块间距">
            <el-input-number v-model="paramsObj.moduleMargin" :min="0" :max="100" size="small" controls-position="right" />
          </el-form-item>
          <!-- 模块边距: 模块的padding -->
          <el-form-item label="模块边距">
            <el-input-number v-model="paramsObj.modulePadding" :min="0" :max="100" size="small" controls-position="right" />
          </el-form-item>
          <el-form-item label="模块圆角">
            <el-input-number v-model="paramsObj.moduleRadius" :min="0" :max="100" size="small" controls-position="right" />
          </el-form-item>
          <el-form-item label="画布宽度">
            <el-input-number v-model="paramsObj.canvasWidth" :min="0" :max="9600" size="small" controls-position="right" />
            <el-checkbox v-model="paramsObj.isResponsive" style="margin-left: 10px;">自适应</el-checkbox>
          </el-form-item>
          <el-form-item label="图表缩放">
            <el-radio-group v-model="paramsObj.isDataZoom">
              <el-radio :label="0"><span class="font13">关闭</span></el-radio>
              <el-radio :label="1"><span class="font13">开启</span></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center;">
      <el-button :loading="loading" class="search-btn-style ok" style="padding: 7px 10px;" type="primary" @click="confirm()">确定</el-button>
      <el-button class="cancel-btn-style" style="width: 80px" @click="handleClose()">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import upBackground from './upBackground';
import { setChartConfig } from '@/api/reportManage';
import ElMessage from '@/utils/message';
export default {
  components: { Title, upBackground },
  props: {
    tabId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      paramsObj: {
        canvasWidth: 1920,
        attachment: '',
        backgroundSize: '拉伸', // 平铺：background-size: 100% 100%;  拉伸：background-size:cover; 居中：background-size:center;
        moduleMargin: 12, // 两个模块间的间距
        modulePadding: 12, // 页面四周边距
        moduleRadius: 10,
        isResponsive: true,
        isDataZoom: 0
      },
      isMobile: false,
      chartConfigAll: {},
      maxHeight: ''
    };
  },
  methods: {
    openDialog(chartConfig, isMobile = false) {
      this.chartConfigAll = _.cloneDeep(chartConfig);
      const chartConfigObj = this.getData(isMobile);
      this.isMobile = isMobile;
      if (chartConfigObj) {
        const moduleMargin = chartConfigObj.moduleMargin || chartConfigObj.moduleMargin === 0 ? chartConfigObj.moduleMargin : 12;
        const modulePadding = chartConfigObj.modulePadding || chartConfigObj.modulePadding === 0 ? chartConfigObj.modulePadding : 12;
        const moduleRadius = chartConfigObj.moduleRadius || chartConfigObj.moduleRadius === 0 ? chartConfigObj.moduleRadius : 10;
        const canvasWidth = chartConfigObj.canvasWidth || chartConfigObj.canvasWidth === 0 ? chartConfigObj.canvasWidth : 1920;
        const isResponsive = chartConfigObj.isResponsive === undefined ? true : chartConfigObj.isResponsive;
        this.paramsObj = {
          attachment: chartConfigObj.backgroundImage || '',
          backgroundSize: chartConfigObj.backgroundSize || '',
          moduleMargin: moduleMargin, // 两个模块间的间距
          modulePadding: modulePadding, // 页面四周边距
          moduleRadius: moduleRadius,
          canvasWidth: canvasWidth,
          isResponsive: isResponsive,
          isDataZoom: chartConfigObj.isDataZoom || 0
        };
      }
      const clientHeight = window.innerHeight;
      this.maxHeight = ((clientHeight * 3) / 5) + 'px';
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.paramsObj = {
        attachment: '',
        backgroundSize: '拉伸'
      };
    },
    confirm() {
      const paramsObj = this.paramsObj;
      const data = {
        backgroundImage: paramsObj.attachment,
        backgroundSize: paramsObj.backgroundSize,
        moduleMargin: paramsObj.moduleMargin,
        modulePadding: paramsObj.modulePadding,
        moduleRadius: paramsObj.moduleRadius,
        canvasWidth: paramsObj.canvasWidth,
        isResponsive: paramsObj.isResponsive,
        isDataZoom: paramsObj.isDataZoom
      };
      const config = {};
      if (this.isMobile) {
        config.mobileStyle = data;
        config.pcStyle = this.getData(false);
      } else {
        config.mobileStyle = this.getData(true);
        config.pcStyle = data;
      }
      const params = {
        config: JSON.stringify(config),
        id: this.tabId
      };
      this.loading = true;
      setChartConfig(params).then(res => {
        if (res.code === 200) {
          ElMessage.success('设置成功');
          this.handleClose();
          this.$emit('getConfig', {
            reset: true,
            isMobile: this.isMobile
          });
        } else {
          ElMessage.error(res.message);
        }
        this.loading = false;
      }).catch(err => {
        this.loading = false;
        console.log(err);
      });
    },
    // 上传文件
    upProgress() {
      this.createLoading = true;
      this.loading = true;
    },
    complateSetData({ data, fileName }) {
      this.createLoading = false;
      this.loading = false;
      const fileList = {
        name: fileName
        // time: new Date().getTime()
      };
      fileList.url = typeof data === 'string' ? data : data.url;
      this.paramsObj.attachment = fileList.url;
      if (this.dialogVisible) this.$message.success('上传成功');
    },
    getData(isMobile) {
      const config = this.chartConfigAll;
      // 兼容旧数据
      if (!Object.hasOwnProperty.call(config, 'pcStyle') && !Object.hasOwnProperty.call(config, 'mobileStyle')) {
        return config;
      }
      if (isMobile) {
        return config.mobileStyle || {};
      } else {
        return config.pcStyle || {};
      }
    },
    removeFileList() {
      this.paramsObj.attachment = '';
    }
  }
};
</script>

<style lang="scss" scoped>
.container-scroll {
  @include scrollBar($x:hidden, $y: auto, $width: 6px);
}
.config-attachment-container {
  display:flex;
}
.font13 {
  font-size: 13px;
}
.config-form {
  display: flex;
  flex-wrap: wrap;
}
</style>
